<template>

    <List item-layout="horizontal" :dataSource="historyList">
      <template #renderItem="{ item }">
        <ListItem>
          <ListItemMeta>
            <template #title>
              <Tag>{{ item.updateTime }}</Tag>
              <span class="font-bold">{{ item.comment }}</span>
            </template>
            <template #avatar>
              {{ item.operatorName }}
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>

</template>

<script lang="ts">
import { defineComponent, ref, } from 'vue';
import { Button, Tag } from 'ant-design-vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import StaffSelector from '/@/views/components/selector/staffSelector/index.vue';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';

import { approve } from '/@/api/work/work';


export default defineComponent({
  components: { BasicForm, StaffSelector, Button, Tag, },
  setup(_, { emit }) {
    //主表单
    const [registerForm, { setFieldsValue }] = useForm({
      schemas: [{
        field: 'divider-basic',
        label: '流程审批',
        component: 'Divider',
      }, {
        field: 'work.operator',
        label: '审批人',
        component: 'Input',
        slot: 'addOperator',
        required: true,
      },
      {
        field: 'work.ccOperator',
        label: '抄送人',
        component: 'Input',
        slot: 'addCCOperator',
      }],
      labelWidth: 100,
      showActionButtonGroup: false,
    });

    const showCommit = ref(true);//是否显示表单提交
    const showApprove = ref(false);//是否显示表单审批
    const task = ref({ agree: true });//当前任务
    const historyList = ref([]);//审批记录

    const { createMessage } = useMessage();

    //审批通过
    async function handleYes() {
      console.log('审批通过', task)
      task.value.agree = true
      approve(task.value).then(res => {
        createMessage.success({
          content: res.msg,
          duration: 1,
        })
      })
    }
    //审批拒绝
    async function handleNo() {
      console.log('审批拒绝', task)
      task.value.agree = false
      approve(task.value).then(res => {
        createMessage.success({
          content: res.msg,
          duration: 1,
        })
      })
    }

    //选人begin   
    //选中的审批人
    const selectedOperatorList = ref([]);
    //选中的抄送人
    const selectedCCOperatorList = ref([]);
    //返回父页面的数据
    const returnData = ref({ 'selectedOperatorList': selectedOperatorList, 'selectedCCOperatorList': selectedCCOperatorList });

    //选人弹框
    const [registerOperatorModal, { openModal: openPersonalSelector, setModalProps: setPersonalModalProps }] = useModal();
    // 弹出选择审批人
    function addOperator() {
      openPersonalSelector(true, {
        selectorProps: {
          multiSelect: false,
          selectedList: selectedOperatorList.value,
        }
      });
      setPersonalModalProps({
        title: `选择审批人`,
        bodyStyle: { padding: '0px', margin: '0px' },
        width: 850, height: 450,
        showOkBtn: true, showCancelBtn: false
      });
    }
    // 选择审批人成功回调
    async function handleSelectOperatorSuccess(selectedList: any) {
      selectedOperatorList.value = selectedList.map(item => { return { code: item.code, name: item.name } });
      if (selectedList && selectedList.length > 0) {
        console.log('SelectApprover.vue->选择审批人成功回调：', selectedList)
        emit('success', returnData.value);
        setFieldsValue({
          'work.operator': selectedOperatorList.value
        })
      }
    }
    // 删除选择审批人成功回调
    async function handleDeleteOperator() {
      setFieldsValue({
        'work.operator': [],
      });
      selectedOperatorList.value = [];
    }

    const [registerCCOperatorModal, { openModal: openCCSelector, setModalProps: setCCModalProps }] = useModal();
    function addCCOperator() {
      openCCSelector(true, {
        selectorProps: {
          multiSelect: true,
          selectedList: selectedCCOperatorList.value
        }
      });
      setCCModalProps({
        title: `选择抄送人`,
        bodyStyle: { padding: '0px', margin: '0px' },
        width: 850, height: 450,
        showOkBtn: true, showCancelBtn: false
      });
    }
    async function handleSelectCCOperatorSuccess(selectedList: any) {
      selectedCCOperatorList.value = selectedList.map(item => { return { code: item.code, name: item.name } });
      if (selectedList && selectedList.length > 0) {
        console.log('SelectApprover.vue->选择抄送人成功回调：', selectedList)
        emit('success', returnData.value);
        setFieldsValue({
          'work.ccOperator': selectedCCOperatorList.value,
        })
      }
    }
    async function handleDeleteCCOperator() {
      setFieldsValue({
        'work.ccOperator': [],
      });
      selectedCCOperatorList.value = [];
    }
    //选人end

    return {
      registerForm, showCommit, showApprove, handleYes, handleNo, historyList,
      registerOperatorModal, addOperator, handleSelectOperatorSuccess, handleDeleteOperator,
      registerCCOperatorModal, addCCOperator, handleSelectCCOperatorSuccess, handleDeleteCCOperator,
    }
  },
});
</script>
